<template>
  <div id="root">
    <!-- 头部 -->
    <heads></heads>
    <!-- 头部  end-->
    <!-- 按钮 -->
    <div class="sale-btn">
      <div class="warp">
        <button @click="Sale">+新增楼盘</button>
        <button>制作海报</button>
        <!--<button>报备用户</button>-->
      </div>
    </div>
    <!-- 按钮end -->
    <!-- 筛选楼盘列表 -->
    <div class="sale-list">
      <div class="warp">
        <div class="sale-list-li">
          <div class="sale-list-li-left">省份</div>
          <div class="sale-list-li-input">
            <select @change="getCity1" v-model="formData.province" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
              <option
                v-for="item in province1"
                :key="item.region_name_c"
                :label="item.region_name_c"
                :value="item.CODE">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">城市</div>
          <div class="sale-list-li-input">
            <select @change="getArea1" v-model="formData.city" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
              <option
                v-for="item in city1"
                :key="item.region_name_c"
                :label="item.region_name_c"
                :value="item.CODE">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">区县</div>
          <div class="sale-list-li-input">
            <select v-model="formData.area" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
              <option
                v-for="item in area1"
                :key="item.region_name_c"
                :label="item.region_name_c"
                :value="item.CODE">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">街道</div>
          <div class="sale-list-li-input">
            <input type="text" v-model="formData.street" placeholder="请输入街道" style="width: 80%; border: 1px solid #a0a0a0;height: 28px;padding-left: 10px;">
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">楼盘名称</div>
          <div class="sale-list-li-input">
            <input type="text" v-model="formData.name" placeholder="请输入楼盘" style="width: 80%; border: 1px solid #a0a0a0;height: 28px;padding-left: 10px;">
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">开发商</div>
          <div class="sale-list-li-input">
            <input type="text" v-model="formData.developer" placeholder="请输入开发" style="width: 80%; border: 1px solid #a0a0a0;height: 28px;padding-left: 10px;">
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">状态</div>
          <div class="sale-list-li-input">
            <select v-model="formData.status" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
              <option
                v-for="item in premises.status"
                :key="item.title"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">产品</div>
          <div class="sale-list-li-input">
            <select v-model="formData.product" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
              <option
                v-for="item in premises.product"
                :key="item.title"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <div class="sale-list-li-left">代理楼盘</div>
          <div class="sale-list-li-input">
            <select v-model="formData.agent_premises" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
              <option
                v-for="item in premises.agent"
                :key="item.title"
                :label="item.title"
                :value="item.id">
              </option>
            </select>
          </div>
        </div>
        <div class="sale-list-li">
          <button class="sale-search" @click="goSearch('ss')">搜索</button>
        </div>
      </div>
    </div>
    <!-- 筛选楼盘列表 end-->
    <!-- 楼盘列表 -->
    <div class="sale-info">
      <table>
        <!-- 标题 end-->
        <tr class="sale-info-title">
          <!--<td style="width:3%;">客户报备</td>-->
          <td >楼盘编号</td>
          <td >楼盘</td>
          <td >省份</td>
          <td >城市</td>
          <td >区县</td>
          <td class="street">街道</td>
          <td >片区</td>
          <td >状态</td>
          <td >开发商</td>
          <td >物业公司</td>
          <td >占地面积</td>
          <td >建筑面积</td>
          <td >总户数</td>
          <!--<td >容积率</td>-->
          <!--<td >绿化率</td>-->
          <td >产品</td>
          <td >开盘时间</td>
          <td >交房时间</td>
          <td >预售证</td>
          <!--<td >房产证</td>-->
          <!--  <td style="width:4%;">产权年限</td> -->
          <!--<td >装修</td>-->
          <!--   <td style="width:5%;">付款方式</td> -->
          <!-- <td style="width:4%;">销售折扣</td> -->
          <td >佣金点位</td>
          <td >成交奖励</td>
          <td >带看奖励</td>
          <td >上传表格</td>
          <td >操作</td>
          <td >删除</td>
        </tr>
        <!-- 标题 end-->
        <!-- 列表循环 -->
        <tr v-for="(item,index) in items" :key="index" @click="lookDetails(item.id)">
          <!--<td style="width:3%;"><span class="edit" @click="BaobeiGo(item.id)">报备</span></td>-->
          <td :title="item.id">{{item.id}}</td>
          <td :title="item.name">{{item.name |subzfc}}</td>
          <td :title="item.province">{{item.province |subzfc}}</td>
          <td :title="item.city">{{item.city |subzfc}}</td>
          <td :title="item.area">{{item.area |subzfc}}</td>
          <td class="splist-str" :title="item.street_address" >{{item.street_address|subzfc}}</td>
          <td :title="item.street">{{item.street|subzfc}}</td>
          <td :title="item.status_text">{{item.status_text|subzfc}}</td>
          <td :title="item.developer">{{item.developer|subzfc}}</td>
          <td :title="item.property_company">{{item.property_company|subzfc}}</td>
          <td :title="item.occupy_acreage">{{item.occupy_acreage |subzfc}}</td>
          <td :title="item.build_acreage">{{item.build_acreage |subzfc}}</td>
          <td :title="item.all_house_num ">{{item.all_house_num |subzfc}}</td>
          <!--<td :title="item.volumetric_rate ">{{item.volumetric_rate |subzfc}}</td>-->
          <!--<td :title="item.green_rate">{{item.green_rate |subzfc}}</td>-->
          <td :title="item.product_type">{{item.product_type | dropStr(2)}}</td>
          <td :title="item.open_quota_date">{{item.open_quota_date|subzfc}}</td>
          <td :title="item.hand_over_date">{{item.hand_over_date|subzfc}}</td>
          <td :title="item.pre_sale_certificate_text">{{item.pre_sale_certificate_text|subzfc}}</td>
          <td :title="item.house_property_certificate_text">{{item.house_property_certificate_text|subzfc}}</td>
          <!--   <td style="width:4%;">产权年限</td> -->
          <td :title="item.transaction_reward">{{item.transaction_reward}}</td>
          <!--    <td style="width:5%;">付款方式</td>
             <td style="width:4%;">销售折扣</td> -->
          <!--<td :title="item.commission_point">{{item.commission_point}}</td>-->
          <!--<td :title="item.transaction_reward">{{item.transaction_reward}}</td>-->
          <td :title="item.belt_see_reward">{{item.belt_see_reward}}</td>
          <td >
            <!--<router-link :to="{name:'Ban',params:{id:item.id}}"><span class="edit">添加</span></router-link>-->
            <span class="edit" @click.stop="showSaleExcal(item.id)">上传</span>
          </td>
          <td ><span class="edit" @click.stop="SaleEdit(item.id)">编辑</span></td>
          <td><span class="edit" @click.stop="handleDelete(item.id)" >删除</span></td>
        </tr>
        <!-- 列表循环 end-->
      </table>
      <!-- 分页 -->
      <div class="page-list">
        <el-pagination @current-change="currentChange"
                       layout="prev, pager, next" :current-page="datas.current_page" :page-size="datas.per_page"
                       :total="datas.total">
        </el-pagination>
      </div>
      <!-- 分页 end-->
    </div>
    <!-- 楼盘列表 end-->

    <!-- 尾部 -->
    <footers></footers>
    <!-- 尾部 end -->

    <!-- 楼盘录入 -->
    <div v-show="Saleshow">
      <Salemodal ref="fileIndex" :goSearch="goSearch" :LDmodal="opensunmit" :SaleClosetwo="Sale"></Salemodal>
    </div>
    <!-- 楼盘录入 end -->
    <!--编辑-->
    <div v-if="Saleshows">
      <Salemodals :buildHouseId="buildHouseId" ref="editLoupan" :goSearch="goSearch" :myformData="myformData" :area_code2="area_code2"
                  :street2="street2"
                  :city_code2="city_code2" :id="id"
                  :renovations="renovations" :property_year="property_yearss" :statuss="statusss" :products="productss"
                  :agent="agentss" :province_code2="province_code2" :fffff="SaleEdit"
                  :SaleCloseone="Sale2" :LDmodal="opensunmit"></Salemodals>
    </div>
    <!--楼盘详情-->
    <div v-show="loupanDetails">
      <div class="my_modal_">
        <div class="my_modal-bg_">
          <div class="modal-title_">
            <div>
              <span :class="{title_color:changeTitle === 1}" @click="changeTitleStyle(1)">楼盘详情</span>
              <span :class="{title_color:changeTitle === 2}" @click="changeTitleStyle(2)">照片详情</span>
              <span :class="{title_color:changeTitle === 3}" @click="changeTitleStyle(3)">销控详情</span>
            </div>
            <img @click="closeDetails" id="closBtn" src="../assets/img/tub.png" alt="">
          </div>
          <div class="modalWarp">
            <div class="my_modal_content_" v-show="changeTitle === 1">
              <div class="content_left">
                <div><span class="details_name">楼盘名称: </span><span :title="detailsItems.name">{{detailsItems.name}}</span></div>
                <div><span class="details_name">楼盘地址: </span><span :title="joinStr"> {{joinStr}} </span>
                </div>
                <div><span class="details_name">物业公司: </span><span :title="detailsItems.property_company">{{detailsItems.property_company}}</span></div>
                <div><span class="details_name">开发商: </span><span :title="detailsItems.developer">{{detailsItems.developer}}</span></div>
                <div><span class="details_name">案场电话: </span><span :title="detailsItems.case_field_tel">{{detailsItems.case_field_tel}}</span></div>
                <div><span class="details_name">占地面积: </span><span :title="detailsItems.occupy_acreage">{{detailsItems.occupy_acreage}}</span></div>
                <div><span class="details_name">建筑面积: </span><span :title="detailsItems.build_acreage">{{detailsItems.build_acreage}}</span></div>
                <div><span class="details_name">总户数: </span><span :title="detailsItems.all_house_num">{{detailsItems.all_house_num}}</span></div>
                <div><span class="details_name">总楼栋数: </span><span :title="detailsItems.all_house_building_num">{{detailsItems.all_house_building_num}}</span></div>
                <div><span class="details_name">容积率: </span><span :title="detailsItems.volumetric_rate">{{detailsItems.volumetric_rate}}</span></div>
                <div><span class="details_name">绿化率: </span><span :title="detailsItems.green_rate">{{detailsItems.green_rate}}</span></div>
                <div><span class="details_name">开盘时间: </span><span :title="detailsItems.open_quota_date">{{detailsItems.open_quota_date}}</span></div>
                <div><span class="details_name">交房时间: </span><span :title="detailsItems.hand_over_date">{{detailsItems.hand_over_date}}</span></div>
                <div><span class="details_name">装修: </span><span :title="detailsItems.renovation">{{detailsItems.renovation}}</span></div>
                <div><span class="details_name">物业费: </span><span :title="detailsItems.property_cost">{{detailsItems.property_cost}}元/平</span></div>
                <div><span class="details_name">预售证: </span><span :title="detailsItems.pre_sale_certificate_text">{{detailsItems.pre_sale_certificate_text}}</span></div>
                <div><span class="details_name">房产证: </span><span :title="detailsItems.house_property_certificate_text">{{detailsItems.house_property_certificate_text}}</span>
                </div>
              </div>
              <div class="content_center">
                <div class="details_name">产权年限</div>
                <div style="display: flex">
                  <div><span class="details_name"></span><span>{{detailsItems.pry_apartment}} </span></div>
                  <div><span class="details_name"></span><span>{{detailsItems.pry_ocean}} </span></div>
                  <div><span class="details_name"></span><span>{{detailsItems.pry_villa}} </span></div>
                  <div><span class="details_name"></span><span>{{detailsItems.pry_shops}} </span></div>
                  <div><span class="details_name"></span><span>{{detailsItems.pry_office}} </span></div>
                  <div><span class="details_name"></span><span>{{detailsItems.pry_hotel}} </span></div>
                  <div><span class="details_name"></span><span>{{detailsItems.pry_housing}} </span></div>
                </div>
                <div>产品类型: <span>{{detailsItems.product_type}}</span></div>
                <div>产品价格</div>
                <div style="display: flex">
                  <div>起价: <span>{{detailsItems.start_price}}</span></div>
                  <div>均价: <span>{{detailsItems.average_price}}</span></div>
                  <div>状态: <span>{{detailsItems.status_text}}</span></div>
                </div>
                <div>付款方式及折扣</div>
                <div>公寓:
                  <span>一次性{{detailsItems.pmd_apartment_one}}折</span><span>按揭{{detailsItems.pmd_apartment_mortgage}}折</span><span>分期{{detailsItems.pmd_apartment_stages}}折</span>
                </div>
                <div>洋房:
                  <span>一次性{{detailsItems.pmd_ocean_one}}折</span><span>按揭{{detailsItems.pmd_ocean_mortgage}}折</span><span>分期{{detailsItems.pmd_ocean_stages}}折</span>
                </div>
                <div>别墅:
                  <span>一次性{{detailsItems.pmd_villa_one}}折</span><span>按揭{{detailsItems.pmd_villa_mortgage}}折</span><span>分期{{detailsItems.pmd_villa_stages}}折</span>
                </div>
                <div>商铺:
                  <span>一次性{{detailsItems.pmd_shops_one}}折</span><span>按揭{{detailsItems.pmd_shops_mortgage}}折</span><span>分期{{detailsItems.pmd_shops_stages}}折</span>
                </div>
                <div>写字楼:
                  <span>一次性{{detailsItems.pmd_office_one}}折</span><span>按揭{{detailsItems.pmd_office_mortgage}}折</span><span>分期{{detailsItems.pmd_office_stages}}折</span>
                </div>
                <div>酒店:
                  <span>一次性{{detailsItems.pmd_hotel_one}}折</span><span>按揭{{detailsItems.pmd_hotel_mortgage}}折</span><span>分期{{detailsItems.pmd_hotel_stages}}折</span>
                </div>
                <div style="display: flex;">
                  <div>代理楼盘: <span>{{detailsItems.agent}}</span></div>
                  <div>佣金点位: <span>{{detailsItems.commission_point}}</span></div>
                  <div>成交奖励: <span>{{detailsItems.transaction_reward}}</span></div>
                  <div>带看奖励: <span>{{detailsItems.belt_see_reward}}</span></div>
                </div>
                <!--楼盘概况-->
                <div>
                   <div>楼盘概况：<span>{{detailsItems.survey}}</span></div>
                </div>
                <div>
                  <div>置业顾问：<span v-for="item of detailsItems.adviser_str" :key="item.id" >{{item.adviser_name}} &nbsp;</span></div>
                </div>
              </div>

            </div>
            <div class="my_modal_content_img" v-show="changeTitle === 2">
              <div class="img_content">
                <div>
                  <div class="img_title">效果图</div>
                  <div class="img_img" v-for="(item,index) in file_list.effect_img" :key="index">
                    <img :src="item.file_url" alt="" @click="bigImg('xgt',index)">
                  </div>
                </div>
                <div>
                  <div class="img_title">实景图</div>
                  <div class="img_img" v-for="(item,index) in file_list.real_scene_img" :key="index">
                    <img :src="item.file_url" alt="" @click="bigImg('sjt',index)">
                  </div>
                </div>
                <div>
                  <div class="img_title">样板间</div>
                  <div class="img_img"v-for="(item,index) in file_list.sample_img" :key="index">
                    <img :src="item.file_url" alt="" @click="bigImg('ybj',index)">
                  </div>
                </div>
                <div>
                  <div class="img_title">户型图</div>
                  <div class="img_img" v-for="(item,index) in file_list.house_type_img" :key="index">
                    <img :src="item.file_url" alt="" @click="bigImg('hxt',index)">
                  </div>
                </div>
                <div>
                  <div class="img_title">交通图</div>
                  <div class="img_img" v-for="(item,index) in file_list.traffic_img" :key="index">
                    <img :src="item.file_url" alt="" @click="bigImg('jtt',index)">
                  </div>
                </div>
                <div>
                  <div class="img_title">封面图</div>
                  <div class="img_img" v-for="(item,index) in file_list.traffic_img" :key="index">
                    <img :src="item.file_url" alt="" @click="bigImg('jtt',index)">
                  </div>
                </div>
                <div>
                  <div class="img_title">视频</div>
                  <!--<div  v-for="item in file_list.video" class="">-->
                    <!--&lt;!&ndash;<video id="myAudio" :src="item.file_url" type="video/mp4"  class="img_list"style=" object-fit: fill"&ndash;&gt;-->
                           <!--&lt;!&ndash;controls="controls" width="400"&ndash;&gt;-->
                           <!--&lt;!&ndash;height="300"></video>&ndash;&gt;-->
                    <!---->
                  <!--</div>-->
                  <div class="videoWarp"  v-for="(item,index) in file_list.video" :key="index">
                    <video  @play="play(index)" class="img_list" controls ref="videos" :src="item.file_url"></video>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="changeTitle === 3" class="my_modal_content_house">
              <div>
                <div>
                  <div class="house_editor_search">
                    <div>
                      <span>分区名</span>
                      <select @change="getbuildList" v-model="houseData.partition_id" placeholder="请选择"class="right_box">
                        <option
                          v-for="(item,index) in fenquList"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </div>
                    <div>
                      <span>楼栋名</span>
                      <select v-model="houseData.building_id" placeholder="请选择" class="right_box">
                        <option
                          v-for="(item,index) in loupanList"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </div>
                    <div>
                      <span>状态</span>
                      <select v-model="houseData.status" placeholder="请选择" class="right_box">
                        <option
                          v-for="(item,index) in statusSelect"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id">
                        </option>
                      </select>
                    </div>
                    <div class="house_editor_search_">
                      <el-button @click="buildHouseList" type="primary">搜索</el-button>
                    </div>
                    <div>
                      <el-button @click="resetHouseData" type="warning">重置</el-button>
                    </div>
                  </div>
                  <div class="discripttionLF">
                    <span class="info-input_box_Up">房源概况</span>
                    <textarea  class="info-input_box_Up_res" v-model="houseData.survey" placeholder="请输入内容"  name=""    rows="5" ></textarea>
                  </div>
                </div>
                <table>
                  <tr>
                    <td>分区名称</td>
                    <td>楼栋名称</td>
                    <td>单元名称</td>
                    <td>楼层名称</td>
                    <td>房间名称</td>
                    <td>状态</td>
                  </tr>
                  <tr v-for="item in houseDataTable.data">
                    <td>{{item.partition}}</td>
                    <td>{{item.building}}</td>
                    <td>{{item.unit}}</td>
                    <td>{{item.floor}}</td>
                    <td>{{item.room_num}}</td>
                    <td>{{item.status_text}}</td>
                  </tr>
                  <!--<tr>-->
                    <!--<td>分区名称</td>-->
                    <!--<td>楼栋名称</td>-->
                    <!--<td>单元名称</td>-->
                    <!--<td>楼层名称</td>-->
                    <!--<td>房间名称</td>-->
                  <!--</tr>-->
                </table>
                <div class="house_editor_page">
                  <div class="block">
                    <el-pagination @current-change="currentBuildHouse"
                                   layout="prev, pager, next" :current-page="houseDataTable.current_page" :page-size="houseDataTable.per_page"
                                   :total="houseDataTable.total">
                    </el-pagination>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--提示弹框-->
    <div v-show="submitShow">
      <Modal :ModalClose="Closesubmit" :message="message" :pushTo="pushTo"></Modal>
    </div>
    <!--上传表格-->
    <div v-if="saleExcalShow === true">
      <sale-excal :LDmodal="opensunmit" :buildId="buildId" :closeSaleExcel="closeSaleExcel"></sale-excal>
    </div>

    <!--//图片放大-->
    <div class="image_Up"  v-show="Pictureshow">
      <el-carousel name="item"  height="600px"  :interval="2000" :autoplay="isAutoplay" :initial-index="showIndex" arrow="always">
        <el-carousel-item    v-for="(item,index) in images_url_list" :key="index">
          <img  :src="item.file_url" alt="">
        </el-carousel-item>
      </el-carousel>
      <div class="minClose" @click="btnClose">
        <img src="../assets/img/tu.jpg" alt="">
      </div>
    </div>
    <!--//图片放大-->
  </div>
</template>
<script type="text/babel">
  import Vue from 'vue';
  import heads from './head';
  import footers from './footer';
  import Salemodal from './sale-modal';
  import Salemodals from './sale-modals';
  import Modal from './modal.vue';
  import SaleExcal from './SaleExcal';
  // import Picture from './Picture'; //图片放大
  export default {
    name: 'SaleList',
    computed:{
      joinStr(){
        return this.detailsItems.province+''+this.detailsItems.city+''+this.detailsItems.area+''+this.detailsItems.street_address;
      }
    },
    components: {
      SaleExcal,
      heads,
      footers,
      Salemodal,
      Salemodals,
      Modal,
      // Picture  //图片放大
    },
    //图片放大
    // props:{
    //   file_list:{
    //     type:Array
    //   }
    // },
    //图片放大
    data() {
      return {
        //pages
        _pages:0,
        // 房源编辑下拉数据
        buildHouseId:0,
        loupanList:[],
        statusSelect: [
          {id:1,title:'正常'},
          {id:2,title:'推荐'},
          {id:3,title:'急售'},
          {id:4,title:'暂不售'},
          {id:5,title:'成交'},
          {id:6,title:'无效'},
        ],
        //是否自动播放
        isAutoplay:true,
        //显示图片索引
        showIndex:0,
        // 房源表格
        houseDataTable:[],
        // searchHouseTable:{
        //   premises_id:''
        // },
        // 分区下拉
        fenquList:[],
        houseData:{
          page:1,
          id:0,//楼盘ID
          partition_id:'',//分区ID
          building_id:'',//楼栋id
          status:'',//状态ID
        },//房源请求数据
        buildId:0,
        saleExcalShow:false,//表格上传
        images_url_list:[], //轮播图图片
        imgList: [],
        changeTitle: 1,
        submitShow: false,
        message: '',
        pushTo: '',
        prefix: '',
        //图片放大
        Pictureshow: false,
        imgUrl: 1, //图片放大
        loupanDetails: false,//楼盘详情
        customerNumber: [
          {id: 1, title: '1'}, {id: 2, title: '2'}, {id: 3, title: '3'}, {id: 4, title: '4'}, {
            id: 5,
            title: '5'
          }, {id: 6, title: '6'}, {id: 7, title: '7'}, {id: 8, title: '8'}, {id: 9, title: '9'}, {
            id: 10,
            title: '10'
          }, {id: 11, title: '11'}, {id: 12, title: '12'}, {id: 13, title: '13'}, {id: 14, title: '14'}, {
            id: 15,
            title: '15'
          }, {id: 16, title: '16'}, {id: 17, title: '17'}, {id: 18, title: '18'}, {id: 19, title: '19'}, {
            id: 20,
            title: '20'
          }],
        customerIntention: [{id: 1, title: '一房'}, {id: 2, title: '两房'}, {id: 3, title: '三房'}, {id: 4, title: '四房'}],
        orCar: [{id: 0, title: '用车'}, {id: 1, title: '不用车'}],
        loupanName: '',
        client_num: '',
        intent_house_type_id: '',
        up_car_place: '',
        client_name: '',
        client_phone: '',
        assign_admit: '',
        is_use_car: '',
        // value: '',
        look_time: '',
        agentss: [],
        statusss: [],
        renovations: [],
        property_yearss: [],
        productss: [],
        id: 0,
        myformData: {},
        province_code2: [],
        city_code2: [],
        area_code2: [],
        street2: [],
        Saleshow: false,
        Saleshows: false,
        items: [],
        datas: [],
        editItems: [],
        premises: [],
        selectEdit: [{}, {}, {}],
        formData: {
          page: 1
        },
        city1: '',
        city2: '',
        area1: '',
        province1: '',
        city_code1: '',
        baobeiShow: false,
        yulanShow: false,
        loupanID: 0,
        detailsItems: [],
        file_list:[]
      };
    },
    filters: {
      // 截取字符串
      dropStr: function(str, value) {
        if (str && str.length > value) {
          return str.substring(0, value);
        } else {
          return str;
        }
      },
      dropDate: function(date) {
        if (date)
          return date.substring(5, 11);
        else
          return '';
      },
      //截取字符串
      subzfc:function(val){
          if(!val){
            return val;
          }
           if(val.length > 5){
             return val.substr(0,3);
           }
          return val;
      }
    },
    methods: {

      //play 视频
      play(i){
        this.$refs.videos.forEach((item,index)=>{
          if(index != i){
            item.pause();
          }
        })
      },


      /*删除*/

      handleDelete(id){
        //http://men.wuyoufang.com/api/index/premises/
        this.$http.delete('/index/premises/' + id).then((res)=>{

          //console.log(res.data.msg)


          if(res.data.status === 1){

            console.log('进俩乐乐乐')

            //重新获取数据
            this.getpremises(this._pages);

            this.currentChange();

            //premises?page=1

          }

          this.submitShow = true;
          this.message = res.data.msg;
        })


      },

      /*删除*/

      //上传表格
      showSaleExcal(id){
        this.saleExcalShow = true;
        this.buildId = id;
        console.log(id)
      },

      //轮播图关闭
      btnClose(){

        this.images_url_list = [];
        this.isAutoplay = false;
        this.Pictureshow = false;
      },

      // 关闭上传弹窗
      closeSaleExcel(){
        this.showIndex = 0;
        this.images_url_list = [];
        this.saleExcalShow = false;


      },
      //放大图片
      bigImg(type,index) {
        this.Pictureshow = true;
        this.isAutoplay = true;
        this.showIndex = index;
        switch (type){
          case 'xgt':this.images_url_list = this.file_list.effect_img; break;
          case 'sjt':this.images_url_list = this.file_list.real_scene_img;break;
          case 'ybj':this.images_url_list = this.file_list.sample_img;break;
          case 'hxt':this.images_url_list= this.file_list.house_type_img;break;
          case 'jtt':this.images_url_list = this.file_list.traffic_img;break;
        }

      },

      //切换样式
      changeTitleStyle(id) {
        this.changeTitle = id;
        if(id === 3){
          this.getBuildHouse();
          this.getFenquList();
        }
      },
      // 查看楼盘详情
      lookDetails(id, file_index) {
        let that = this;
        that.loupanDetails = true;
        that.houseData.id = id;
        that.$http.get('/index/premises/' + id, {}).then(res => {
          that.detailsItems = res.data.data;
          console.log(res.data.data.file_list);
          that.file_list = res.data.data.file_list;
          //that.imgList = res.data.data.file_list.effect_img;
          //that.houseDataTable = res.data.data.house

        }).catch(err => {
          console.log(err);
        });
      },
      // 查询楼盘房源
      getBuildHouse(){
        let that = this;
        that.$http.get('/index/premises_house',{
          params:that.houseData
        }).then(res=>{
          console.log(res);
          that.houseDataTable = res.data;

        }).catch(err=>{
          console.log(err);
        })
      },
      //获取分区下拉
      getFenquList(){
        let that = this;
        that.$http.get('/newapi/Premisespartition/getdong',{
          params:{
            premises_id :that.houseData.id
          }
        }).then(res=>{
          console.log(res);
          that.fenquList=res.data.res;
        }).catch(err=>{
          console.log(err);
        })
      },
      //获取楼盘下拉
      getbuildList(){
        let that = this;
          that.$http.get('/newapi/Premisesbuilding/getdong',{
            params:{
              premisespartition_id:that.houseData.partition_id
            }
          }).then(res=>{
            console.log(res);
           that.loupanList =res.data.res;
          })
      },
      //房源搜索
      buildHouseList(){
        let that = this;
        that.houseData.page = 1;
        that.$http.get('/index/premises_house',{
          params:that.houseData
        }).then(res=>{
          console.log(res);
          that.houseDataTable = res.data;
        })
      },
      //房源 重置
      resetHouseData(){
        this.houseData.page = 1;
        this.houseData.partition_id = '';//分区ID
        this.houseData.building_id = '';//楼栋id
        this.houseData.status = '';//状态ID
      },
      // 关闭楼盘详情
      closeDetails() {
        this.loupanDetails = false;

      },
      // 打开提示弹窗
      opensunmit() {
        this.message = this.$store.state.messageString;
        this.submitShow = true;
      },
      Closesubmit() {
        this.message = '';
        this.pushTo = '';
        this.submitShow = false;
      },
// 省市区
      getprovince() {
        let that = this;
        that.$http.get('/newapi/Area/getAreaRegion', {
          params: {
            country_code: 'CN'
          }
        }).then(response => {
          let data = response.data.res;
          that.province1 = data;
        });
      },
      getCity1() {
        let that = this;
        that.$http.get('/newapi/Area/getAreaRegion', {
          params: {
            country_code: 'CN',
            upper_region: that.formData.province
          }
        }).then(res => {
          let data = res.data.res;
          that.city1 = data;
        });
      },
      getArea1() {
        let that = this;
        that.$http.get('/newapi/Area/getAreaRegion', {
          params: {
            country_code: 'CN',
            upper_region: that.formData.city
          }
        }).then(res => {
          let data = res.data.res;
          that.area1 = data;
          // console.log(data)
        });
      },
      // 获取楼盘数据
      getpremises() {
        let that = this;
        that.$http.post('/index/premises/list_select_item', {}).then(res => {
          let data = res.data;

          that.premises = data;
          console.log(that.premises)
        }).catch(err => {
          console.log(err);
        });
      },
      // 分页
      currentChange(val) {
        this._pages = val;
        let that = this;
        that.formData.page = val;
        that.$http.get('/index/premises', {
          params: that.formData
        }).then(res => {
          let data = res.data;
          that.items = data.data;
          that.datas = data;
        }).catch(err => {
          console.log(err);
        });
      },
      currentBuildHouse(val){
        let that = this;
        that.houseData.page = val;
        that.getBuildHouse();
      },
      // 添加楼栋
      // tianjiaDong(){
      //   this.$router.push('/Ban')
      // },
      // 新增楼盘
      Sale() {

        let that = this;
        that.$refs.fileIndex.getloupan();
        that.Saleshow = !that.Saleshow;
      },
      Sale2() {
        let that = this;
        that.Saleshows = !that.Saleshows;
      },
      // 搜索
      goSearch(str) {
        if(str === 'ss'){
            this.formData.page = 1;
        }
        //
        let that = this;
        that.$http.get('/index/premises', {
          params: this.formData
        }).then(res => {
          let data = res.data;
          console.log(res);
          that.items = data.data;
          that.datas = data;
        }).catch(err => {
          console.log(err);
        });
      },
      // 编辑
      SaleEdit(id) {
        // const that = this;
        this.buildHouseId = id;
        this.$http.get('/index/premises/save_select_item', {
          params: {}
        }).then(res => {
          this.agentss = res.data.agent;
          // this.productss= res.data.product;
          this.statusss = res.data.status;
          this.property_yearss = res.data.property_year;
          this.renovations = res.data.renovation;
          console.log(this.property_yearss);
        }).catch(err => {
          console.log(err);
        });
        this.$http.get('/index/premises/edit/' + id).then(res => {
          let str = new Object(res.data.data);
          this.myformData = str;
          this.id = id;
          // console.log(res,222225);
          console.log(this.myformData);
          this.province_code2 = this.myformData.select_item.province;
          this.city_code2 = this.myformData.select_item.city;
          this.area_code2 = this.myformData.select_item.area;
          this.street2 = this.myformData.select_item.street;
          this.Saleshows = !this.Saleshows;
          // province_code
          //城市
          this.$refs.editLoupan.getCity(res.data.data.province_code)
          //  区域
          this.$refs.editLoupan.getArea(res.data.data.city_code);
          //片区
          this.$refs.editLoupan.getregion(res.data.data.area_code)

        }).catch(err => {
          console.log(err);
        });

        //调用子组件的函数
        this.$refs.editLoupan.getCounselor();

      }
    },

    mounted() {
      this.goSearch();
      this.getpremises();
      this.getprovince();
    }
  };
</script>

<style scoped>

  /*概况*/
  .discripttionLF{
    width:100%;
    overflow: hidden;

  }
  .discripttionLF span{
    float:left;
    width:80px;


  }
  .discripttionLF textarea{
    float:left;
    width:480px;
    padding:0;
  }

  /*关闭小按钮*/
  .minClose img{
    width:24px;
    height:24px;
    background:#fff;
    color:#000;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position:absolute;
    z-index:1000;
    right: -5px;
    top:-5px;
    font-size:18px;
    line-height:24px;
    cursor:pointer;

  }
  /*照片*/
  .img_content > div {
    /*height: 160px;*/
  }

  .img_content > div img {
    height: 120px;
  }

  .img_img {
    display: inline-block;
    margin-top: 60px;
    border: 1px solid #eee;
    cursor:pointer;
  }
  .img_title {
    height: 30px;
    text-align: center;
    line-height: 130px;
  }
  .img_list{
    display: flex;
    width: 48%;
    height: 200px;
    padding-left: 10px;
    top: 60px;
    position: relative;
    float: left;
    margin-bottom: 10px;
  }

  /*模态框*/


  /*xiaozhe*/
  .my_modal_ {
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:9;
    background: rgba(0, 0, 0, 0.6);
  }

  .my_modal-bg_ {
    width:730px;
    position: absolute;
    background: #fff;
    left: 50%;
    top:164px;
    margin-left: -300px;
    overflow: hidden;
    box-shadow: #e8e7e7 0px 0px 10px;
    height:450px;
    overflow:hidden;
  }

  #closBtn{
    position: absolute;
    right:10px;
    top:16px;
    cursor: pointer;

  }


  /*warp*/
  .modalWarp{
    width:100%;
    height:400px;
    overflow:hidden;
    overflow-y:auto;
  }

  /*第一栏 开始*/
  .my_modal_content_{
    color: #000000;
    line-height: 30px;
    height: 30px;
  }
  .my_modal_content_ .content_left{
    float: left;
    width:200px;
  }

  .my_modal_content_ .content_left div{
    width:100%;
    overflow: hidden;

  }
  .my_modal_content_ .content_left div span:nth-child(1){
    float: left;
    width: 80px;
    text-align: center;
  }
  .my_modal_content_ .content_left div span:nth-child(2){
    float: left;
    width:120px;
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;



  }

  .my_modal_content_  .content_center{
    width:500px;
    float:left;
    padding-left:30px;
    box-sizing:border-box;
  }

  /*第一栏结束*/

  /*xiaozhe*/

  .content_select {
    width: 70%;
  }

  .content_select .el-select {
    width: 100%;
  }

  .content_select input {
    width: calc(100% - 5px);
    height: 25px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
  }

  .content_select .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100%;
  }

  .rele-title {
    position: fixed;
  }

  .sale {
    top: 10px !important
  }

  .sale-info {
    width: 100%;
    float: left;
    position: fixed;
    top: 223px;
    height: calc(100% - 256px);
    overflow-y: auto;
  }

  table {
    width: 100%;
  }

  table td {
    line-height: 30px;
    height: 30px;
    padding:0 3px;
    border: 1px solid #d3d3d3;
  }

  .sale-list-li-left {
    width: 30%;
    float: left;
    line-height: 30px;
    text-align: center;
  }

  .page-list {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 70px;
  }

  .sale-list-li {
    width: 100%;
    float: left;
    margin-top: 10px;
  }

  .sale-list-li-input {
    width: 70%;
    float: left;
  }
  select{
    cursor:pointer;
  }
  .edit{
    cursor:pointer;
  }
  .sale-search {
    margin-left: 25px;
    background: #415dba;
    color: #ffffff;
    font-size: 1.1em;
    border: none;
    height: 30px;
    line-height: 30px;
    width: 60px;
    border-radius: 5px;
    cursor:pointer;
  }

  .sale-info-title {
    background-color: #1590ed;
    /*  position: fixed;*/
    width: 100%;
    overflow: hidden;
    font-weight:bold;
    color: #fff;
  }

  tr:nth-child(n+2):hover{
    background: #f9f9f9
  }

  .sale-list-li-input input {
    width: 90%;
    float: left;
    height: 30px;
    line-height: 30px;
    background: #fff;
    border: 1px solid #d3d3d3;
    cursor:pointer;
  }

  .sale-btn {
    width: 100%;
    position: fixed;
    top: 80px;
    float: left;
    background: #f9f9f9;
    border-bottom: 1px solid #d3d3d3;
    line-height: 40px;
    height: 40px;
  }

  .sale-btn button {
    margin-right: 40px;
    font-size: 1.1em;
    padding: 5px 10px;
    border-radius: 5px;
    background: #415dba;
    color: #fff;
    border: none;
    cursor:pointer;
  }

  .sale-list {
    position: fixed;
    top: 121px;
    background: #f9f9f9;
    float: left;
    width: 100%;
    left: 0;
    height: 94px;
    overflow: hidden;
    border-bottom: 1px solid #e1e1e2;
  }

  .sale-list-li {
    width: 16.666666667%;
    float: left;
  }

  /*查看详情图片*/
  .content_right > div {
    display: flex;
  }

  .content_right > div > div {
    margin: 10px;
  }

  .content_right img {
    width: 100px;
    height: 80px;
  }

  /*视频*/
  .my_video {
    height: 200px;
  }

  .title_color {

    color:#a0a0a0;
  }
  .image_Up{
    width:1000px;
    height:400px;
    text-align: center;
    top:15%;
    z-index:100000;
    position: fixed;
    left:50%;
    transform: translate(-500px);
    right: 0;
    bottom: 0;
  }


  .modal-title_ {
    height:50px;
    font-size:14px;
    color: #000;
    background: #f5f5f7;
    z-index: 9;
    border-bottom: 1px solid #d3d3d3;
    position: relative;

  }

  .modal-title_ div{
    height:100%;
    line-height:50px;


  }
  .modal-title_ div span{
    line-height:50px;
    margin-left:10px;
    margin-right:10px;
    float: left;

  }


    /*房源表格*/
  .my_modal_content_house{
   height: 380px;
    padding: 10px 10px 10px;
    overflow-y: hidden;
    overflow: auto;
  }

  /*设置表格溢出为省略号*/
  .splist-str{
   text-overflow: ellipsis;
    white-space: nowrap;
  }

  /*街道样式*/
  .street{
    width:3%;
    overflow:hidden;
  }
  .my_modal_content_img{
    height: 400px;
    overflow-y: auto;
    padding-left: 10px;
  }


  /*房源*/
   .house_editor_search {
    display: flex;
  }
   .right_box{
      width: 100px;
     height: 25px;
  }
   .house_editor_search > div {
    margin: 10px;

  }



   .house_editor_search > div span {
    margin: 0 10px;
  }

  .house_editor_search > div button {
    /*border: none;*/
    padding: 5px 15px;
    margin: 0 10px;
  }
  /*//分页*/
  .house_editor_page{
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  /*顶部颜色*/
  .warp{
    background-color: #ecedee;
    width: 100%;
  }
</style>

